<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 路由
        // 入口文件中定义路由的路径
        const routes = [
            // 默认打开的时候。自动显示 #/   ----->根据配置自动来到我们定义好路由
            {
                // 重定向
                path: "/",
                // ?参数的话  哪怕下面规定了路由参数，重定向不成功！注意！   redirect: "/my?name=cc"
                redirect: "/find"
            },
            {// 配置的是一级路径 
                path: "/find", // 设计的路径，不是vue文件真实的路径！
                component: Find,
                children: [{ // 二级路径
                    path: "toplist", // 路由名称随便定义 前面没有/
                    component: FindToplist,
                },
                {
                    path: "playlist", // 路由名称随便定义
                    component: FindPlaylist,
                },
                {
                    path: "djradio", // 路由名称随便定义
                    component: FindDjradio,
                },
                ]
            },
            { //  404 跳转
                path: "*",
                component: NotFound
            }
        ];


        // 父文件中 引入路由
        <a href="#/find" >发现音乐</a>
        // 或   <router-link to=''></router-link>
        // 这种形式会将路由以a链接形式进行输出,并自带一个类名以便设置 tab 栏切换样式
        //     公共类名:     .router-link-active
        <router-link to="/find">发现音乐</router-link>

        // 父文件中 以<router-view></router-view>标签显示引入的路由
        <router-view></router-view>



        // 二级路由     书写入口文件中定义的二级路由路径
        <router-link to="/find/toplist">排行榜</router-link>



        // 跳转传参
        // 两种读取传值的方式
        { { $route.query.id } }     //   /my?name=zs 
        { { $route.params.id } }    //   /my/cc 




        // 路由传值 
        // /one/:id

        // 好理解的方法
        this.$router.push({
            path: "/one/" + id
        });

        // params官方:
        this.$router.push({
            name: "one",
            params: {
                id: id
            }
        });



        // /one?id=1
        // query官方：
        this.$router.push({
            path: "/one",
            query: {
                // 参数名：形参
                id: id,
            },
        });










        // Vant框架
        // .自动按需引入    入口文件中按需写入
        import { Button } from 'vant';
        Vue.use(Button);
        // 然后 CV 大法好







    </script>

</body>

</html>